<template>
  <view class="page-body">
	  <u-navbar :is-back="false" title="销售报表"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>
    <u-tabs :list="list" bg-color="#ffffff" height="96" :is-scroll="false" :bar-style="bars"
      :bar-width="375" active-color="#3296FA" inactive-color="#191F25" :current="current"
      @change="change"></u-tabs>
    <view class="infos" v-if="current==0">
      <view class="itit" @click="showPhoto">
        选择报表类型
      </view>

      <view class="iname">
        提交后可到提交记录中查看
      </view>
      <view class="baoBox x-row">
        <view class="x-col" @click="gotoAdd(0)">
          <image class="bimg" src="/static/day.png">
          </image>
          <view class="bname">日报</view>
        </view>
        <view class="x-col" @click="gotoAdd(1)">
          <image class="bimg" src="/static/week.png">
          </image>
          <view class="bname">周报</view>
        </view>
        <view class="x-col" @click="gotoAdd(2)">
          <image class="bimg" src="/static/month.png">
          </image>
          <view class="bname">月报</view>
        </view>
      </view>
    </view>
    <view class="clist " v-if="current==1">
      <view class="titrow x-row">
        <view class="x-col-center x-col btype">
          报表类型
        </view>
        <view class="x-col-center ">
          <view class="x-row baorow">
            <view @click="typeChange(0)" class="x-col-center item " :class="type==0?'ied':''">
              日报
            </view>
            <view @click="typeChange(1)" class="x-col-center item cen" :class="type==1?'ied':''">
              周报
            </view>
            <view @click="typeChange(2)" class="x-col-center item" :class="type==2?'ied':''">
              月报
            </view>
          </view>
        </view>
      </view>
      <view class="list" @click="gotoDetail(b.fId)" v-for="(b,bidx) in clist" :key="bidx">
        <view class="x-row userRow">
          <view class="x-col-center uimg">
            <image :src="$api.UserImg(b.fUserId)">
            </image>
          </view>
          <view class="x-col x-col-center">
            <view class="send">
              {{b.fCreateTime}}提交的{{type==1?'周':(type==2?'月':'日')}}报
            </view>
            <view class="time">
              {{b.fEndTime}}
            </view>
          </view>
        </view>
        <block v-if="type==0">
          <view class="cons">
            今日完成工作：{{b.fContent}}
          </view>
          <view class="cons">
            未完成工作：{{b.fNotDo}}
          </view>

          <view class="cons">
            需协调工作：{{b.fNeedHelp}}
          </view>
        </block>
        <block v-if="type==1">
          <view class="cons">
            本周工作内容：{{b.fContent}}
          </view>
          <view class="cons">
            本周工作总结：{{b.fSumUp}}
          </view>
          <view class="cons">
            下周工作计划：{{b.fNextPlan}}
          </view>
          <view class="cons">
            需协调工作：{{b.fNeedHelp}}
          </view>
        </block>
        <block v-if="type==2">
          <view class="cons">
            本月工作内容：{{b.fContent}}
          </view>
          <view class="cons">
            本月工作总结：{{b.fSumUp}}
          </view>

          <view class="cons">
            下月工作计划：{{b.fNextPlan}}
          </view>
          <view class="cons">
            需协调与帮助：{{b.fNeedHelp}}
          </view>
        </block>
        <view class="state" v-if="b.answer">
          领导回复：{{b.answer}}
        </view>
      </view>
      <u-empty mode="data" margin-top="100" v-if="isAllList==0&&clist.length==0">
      </u-empty>
      <u-loadmore margin-bottom="130" marginTop="130" bg-color="#F8F9FC"
        v-if="clist.length>0&&isAllList==0" :status="status" />
    </view>
  </view>
</template>

<script>
import photoLoaction from '../../components/photoLoaction'
export default {
  components: {
    photoLoaction
  },
  data() {
    return {
      bars: {
        height: '3rpx'
      },
      list: [
        {
          name: '写报表'
        },
        {
          name: '提交记录'
        }
      ],
      current: 0,
      img: this.urlimg,

      clist: [],
      isAllList: 1,
      page: 10,
      status: 'loading',
      loading: true,
      type: 0 //0 日报 1周报 2月报
    }
  },
  onLoad() {
    var t = uni.getStorageSync('userType')
    uni.setNavigationBarTitle({
      title: t == 'xs' ? '销售报表' : t == 'sj' ? '司机报表' : '库管报表'
    })
  },
  onReachBottom() {
    if (this.isAllList != 0) {
      this.page += 10
      this.getList()
    }
  },
  methods: {
    typeChange(e) {
      this.type = e
      this.defaultData()
      this.getList()
    },
    showPhoto() {
      this.showpho = true
    },
    change(index) {
      this.current = index
      if (index == 1) {
        this.defaultData()
        this.getList()
      }
    },
    gotoDetail(id) {
      uni.navigateTo({
        url: 'report_detail?id=' + id + '&type=' + this.type
      })
    },
    gotoAdd(t) {
      uni.navigateTo({
        url: 'report_add?type=' + t
      })
    },

    defaultData() {
      this.isAllList = 1
      this.page = 10
      this.clist = []
      this.status = 'loading'
      this.loading = true
    },
    getList() {
      let that = this,
        params = {
          value: {
            iType: this.type + 1,
            Status: 0,
            Key: ''
          },
          PageSize: this.page
        }
      this.$axios('api/WorkSummary/ListPaged', 'post', params).then(res => {
        that.loading = false
        let data = res.Value.List
        if (data.length == 0) {
          that.isAllList = 0
          that.status = 'nomore'
        } else {
          that.clist = data
        }
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background: #f8f9fc;
}
.clist {
  .titrow {
    padding: 38rpx 24rpx 28rpx 24rpx;
    box-sizing: border-box;
    .btype {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
    }
    .baorow {
      border-radius: 0px 6rpx 6rpx 0px;
      border: 2rpx solid #3d7fff;
      text-align: center;
      border-radius: 6rpx;
      overflow: hidden;
      .item {
        width: 126rpx;
        height: 60rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #3d7fff;
        line-height: 60rpx;
      }
      .ied {
        background-color: #3d7fff;
        color: #ffffff;
      }
      .cen {
        border-right: 2rpx solid #3d7fff;
        border-left: 2rpx solid #3d7fff;
      }
    }
  }
  .list {
    background-color: #ffffff;
    margin-bottom: 16rpx;
    padding: 32rpx;
    box-sizing: border-box;

    .userRow {
      margin-bottom: 20rpx;
      .uimg {
        image {
          width: 64rpx;
          height: 64rpx;
          border-radius: 50%;
          margin-right: 32rpx;
        }
      }
      .send {
        font-size: 32rpx;
        font-weight: 400;
        color: #34404a;
        line-height: 44rpx;
      }
      .time {
        font-size: 22rpx;
        font-weight: 400;
        color: #979797;
        line-height: 32rpx;
      }
    }
    .cons {
      font-size: 24rpx;
      font-weight: 400;
      color: #979797;
      line-height: 34rpx;
      margin-bottom: 8rpx;
    }
    .state {
      font-size: 24rpx;
      font-weight: 400;
      color: #f67220;
      line-height: 34rpx;
      padding: 8rpx 0;
    }
  }
}
.infos {
  padding: 112rpx 32rpx;
  box-sizing: border-box;
  text-align: center;
  .itit {
    font-size: 44rpx;
    font-weight: 500;
    color: #333333;
    line-height: 60rpx;
    margin-bottom: 10rpx;
  }
  .iname {
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;
    margin-bottom: 64rpx;
  }
  .baoBox {
    padding: 64rpx 0;
    background: #ffffff;
    border-radius: 32rpx;
    .bimg {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 16rpx;
    }
    .bname {
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
      line-height: 44rpx;
    }
  }
}
</style>
